:root {

  /* functions color */
  --color-primary: #1862F5;
  --color-danger: #F5222D;
  --color-warning: #FAAD14;
  --color-success: #52C41A;

  /* systen color */
  --color-red: #F5222D;
  --color-volcano: #FA541C;
  --color-orange: #FA8C16;
  --color-gold: #FAAD14;
  --color-yellow: #FADB14;
  --color-lime: #A0D911;
  --color-green: #52C41A;
  --color-cyan: #13A8A8;
  --color-blue: #1890FF;
  --color-geek-blue: #1862F5;
  --color-purple: #722ED1;
  --color-magenta: #EB2F96;

  --color-black-100: #000000;
  /* title */
  --color-black-85: rgba(0, 0, 0, 0.85);
  /* primary text */
  --color-black-65: rgba(0, 0, 0, 0.65);
  /* secondary text */
  --color-black-45: rgba(0, 0, 0, 0.45);
  /* disable */
  --color-black-25: rgba(0, 0, 0, 0.25);
  /* border */
  --color-black-15: #eee;
  /* divider */
  --color-black-6: rgba(0, 0, 0, 0.06);
  /* background */
  --color-black-4: rgba(0, 0, 0, 0.04);
  /* table header */
  --color-black-2: rgba(0, 0, 0, 0.02);

  --color-bg: #f5f5f5;
  --color-fg: #fff;
  --color-panel-header: #fafafa;
  /* size */
  --border-radius: 4px;
}



/* 适配黑暗模式主题颜色 */
@media (prefers-color-scheme: dark) {
  :root {
      --color-black-100: rgba(255, 255, 255, 1);
      /* title */
      --color-black-85: rgba(255, 255, 255, 0.85);
      /* primary text */
      --color-black-65: rgba(255, 255, 255, 0.65);
      /* secondary text */
      --color-black-45: rgba(255, 255, 255, 0.45);
      /* disable */
      --color-black-25: rgba(255, 255, 255, 0.25);
      /* border */
      --color-black-15: rgba(255, 255, 255, 0.15);
      /* divider */
      --color-black-6: rgba(255, 255, 255, 0.06);
      /* background */
      --color-black-4: rgba(255, 255, 255, 0.04);
      /* table header */
      --color-black-2: rgba(255, 255, 255, 0.02);


      --color-bg: rgba(0, 0, 0, 0.8);
      --color-fg: #000;
      --color-panel-header: #252229;
  }
}

/* reset */
h1, h2, h3, h4, h5, h6, body {
  margin: 0;
  padding: 0;
}

a{
  color: var(--color-primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* text */
.text-primary {
  color: var(--color-black-65)
}
.text-secondary {
  color: var(--color-black-45)
}
.text-disable {
  color: var(--color-black-25)
}

/* input */
select {
  min-width: 150px;
  margin: 0 10px;
}

/* input, select {
  height: 36px;
  border-color: var(--color-black-15);
  border-radius: var(--border-radius, 4px);
} */

/* input, select, a:focus {
  outline-color: var(--color-primary);
} */

/* table */
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--color-black-65);
  font-size: 13px;
}

.table thead tr {
  background-color: #F8F8F9;
}

.table thead tr,
.table tbody tr {
  border-bottom: 1px solid #dfe6ec;
}
.table th,td {
  padding: 10px 0;
  text-align: left;
}


/* btn */
.btn {
  height: 36px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-black-15);
  border-radius: var(--border-radius);
  color: var(--color-black-65);
  transition: all 0.2s;
}
.btn.btn-plain {
  border: none;
}
.btn.btn-text {
  color: var(--color-primary);
  border: none;
}
.btn.btn-text:hover {
  color: var(--color-blue);
  background: transparent;
}
.btn:hover {
  background: var(--color-black-4);
}
.btn:active {
  background: var(--color-black-6);
}
.btn.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn.btn-gradient {
  border-color: var(--color-primary);
  background: linear-gradient(90deg, #1862F5 0%, #1887F5 100%);
  color: #fff;
}
.btn.btn-gradient:hover{
  background: linear-gradient(90deg, #0a53e6 0%, #1887F5 100%);
}
.btn.btn-gradient:active{
  background: linear-gradient(90deg, #0f4eca 0%, #1887F5 100%);
}

/* input[type=text],
input[type=search],
input[type=password] {
  height: 36px;
  border: 1px solid var(--color-black-15);
  border-radius: var(--border-radius);
  transition: all 0.2s;
  padding: 0 0.8em;
}
input[type=text]:focus,
input[type=search]:focus,
input[type=password]:focus, */
button:focus,
a:focus {
  outline: none;
  border-color: var(--color-primary);
}
.empty {
  text-align: center;
  color: var(--color-black-45);
}
.tooltip {
  --tooltip--bg: rgba(0, 7, 17, 0.7);
  text-align: center;
  color: #fff;
  background: var(--tooltip--bg);
  font-size: 12px;
  padding: 5px 10px;
  position: absolute;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  z-index: 301;
  pointer-events: none;;
}
.mask {
  position: fixed;
  z-index: 300;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(2, 16, 34, 0.6);
}
/* transition */
.down-enter-active,
.down-leave-active {
  transition: all 0.25s ease;
}

.down-enter-from,
.down-leave-to {
  top: 45%;
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}


.right-enter-active,
.right-leave-active {
  transition: all 0.3s ease;
}

.right-enter-from,
.right-leave-to {
  transform: translateX(100%);
}

@keyframes ant-line {
  to {
    stroke-dashoffset: -500;
  }
}

